<!--
 * @Description: 历史留言详细页面
 * @Author: Kerwin
 * @Date: 2025-07-25 16:58:06
 * @LastEditTime: 2025-07-25 17:54:15
 * @LastEditors:  Please set LastEditors
-->

<template>
  <view class="container">
    <view style="text-align: right; margin: 20rpx">
      <!-- 重新加载图标 -->
      <u-icon
        color="black"
        name="reload"
        size="40"
        @click="getDetailInfo"
        style="cursor: pointer"
      ></u-icon>
    </view>
    <view style="margin-bottom: 80rpx">
      <view class="bt"> 您的问题 </view>
      <view class="nr" v-html="lyInfo.remark"></view>
      <view
        v-if="lyInfo.resources && lyInfo.resources.length > 0"
        class="tpbox"
      >
        <van-image
          v-for="(tp, index) in lyInfo.resources"
          :key="tp.id"
          width="200rpx"
          height="200rpx"
          fit="cover"
          style="margin-right: 20rpx"
          :src="`https://image.blacksilverscore.com/${tp.resourceUrl}`"
          @click="
            handleClickImage(
              `https://image.blacksilverscore.com/${tp.resourceUrl}`
            )
          "
        />
      </view>
    </view>
    <view>
      <view class="bt"> 回复内容 </view>
      <template v-if="lyInfo.answer">
        <view class="nr" v-html="lyInfo.answer"></view>
      </template>
      <template v-else>
        <view class="nr"> 暂未回复 </view>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { baseApi } from '@/api'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
// 模式类型
const modelType = ref<any>(uni.getStorageSync('selfServiceModelType'))
//工具
import 'quill/dist/quill.core.css'
const answer = ref('')
const lyid = ref(null)
const lyInfo = ref<any>({})

onLoad((option: any) => {
  if (option) {
    lyid.value = option.id
    getDetailInfo()
  }
})
// 获取留言详情
const getDetailInfo = async () => {
  const { data } = await baseApi.getLeaveMessageDetail({
    channelId: 1,
    detail: true,
    noPaging: true,
    integralsRuleId: modelType.value,
    userId: userInfo.value.id,
    id: lyid.value
  })
  // console.log(data)
  lyInfo.value = data
}
const handleClickImage = (currentUrl: string) => {
  // 准备所有图片URL数组
  const urls =
    lyInfo.value.resources?.map(
      (item: any) => `https://image.blacksilverscore.com/${item.resourceUrl}`
    ) || []

  // 查找当前点击图片在数组中的索引
  const currentIndex = urls.findIndex((url: string) => url === currentUrl)
  // 调用预览接口
  uni.previewImage({
    current: currentIndex, // 当前显示图片的索引
    urls: urls, // 需要预览的图片链接列表
    indicator: 'number', // 显示指示器，可选值：'default'（点状指示器）| 'number'（数字指示器）| 'none'（不显示指示器）
    loop: true, // 是否可循环预览
    success: () => {
      console.log('预览图片成功')
    },
    fail: (err) => {
      console.error('预览图片失败', err)
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  .tpbox {
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 20rpx;
    padding-left: 40rpx;
  }
  .bt {
    font-size: 35rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .nr {
    background-color: #fff;
    width: 100%;
    height: 300rpx;
    padding: 20rpx;
    font-size: 32rpx;
    overflow-y: scroll;
    margin-bottom: 20rpx;
  }
}
</style>
